<template>
    <div>
        <el-tabs v-model="tabName"
                 type="border-card"
                 style="width:98.8%;padding: 0px;min-height: 650px;margin-left: 10px;margin-bottom: 10px">
            <el-tab-pane label="用户支付"
                         name="tabName"
                         style='padding:1em;background-color:white'>
                <el-form ref="form"
                         :model="form"
                         label-width="120px">
                    <el-row :gutter='20'>
                        <el-col :span="11">
                            <el-form-item label="缴费产品:">
                                <el-input size="medium"
                                          readonly
                                          v-model="form.payname"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="缴费人员:">
                                <el-input size="medium"
                                          readonly
                                          v-model="form.username"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter='20'>
                        <el-col :span="11">
                            <el-form-item label="缴费金额:">
                                <el-input size="medium"
                                          readonly
                                          v-model="form.paymoney"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="缴费优先级:">
                                <el-input size="medium"
                                          readonly
                                          v-model="form.paylevel"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter='20'>
                        <el-col :span="11">
                            <el-form-item label="支付时间:">
                                <el-input size="medium"
                                          readonly
                                          v-model="form.costtime"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="支付状态:">
                                <el-input size="medium"
                                          readonly
                                          v-model="form.coststatus"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter='20' style="margin-top: 20px">
                        <el-col :span="22">
                            <el-form-item label='支付类型：' style="margin-left: 10px">
                                <el-radio-group v-model="form.costtype">
                                    <el-radio :label="1"><img src="../../../../assets/images/zfb1.png" style="width: 100px;height: 100px"></el-radio>
                                    <el-radio :label="2" style="margin-left: 8px"><img src="../../../../assets/images/wx1.png" style="width: 100px;height: 100px"></el-radio>
                                    <el-radio :label="3" style="margin-left: 8px"><img src="../../../../assets/images/ysf.png" style="width: 100px;height: 100px"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter='20'>
                        <el-col :span="22">
                            <el-form-item label='通知内容：'
                                          style="margin-left: 10px">
                                <div v-html="form.paycontent"></div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter='20'>
                        <el-col :span="22">
                            <el-form-item label='我的回复：'
                                          style="margin-left: 10px">
                                <el-input type="textarea"
                                          rows="3"
                                          v-model="form.costcontent"
                                          size="medium"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="success-button">
                    <el-button type="primary"
                               z-index="100"
                               :disabled='false'
                               class="fa fa-mail-reply"
                               @click="back">&nbsp;返回&nbsp;&nbsp;
                    </el-button>
                    <el-button type="primary"
                               z-index="100"
                               icon="el-icon-s-promotion"
                               @click="pay">&nbsp;支付&nbsp;&nbsp;
                    </el-button>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        name: "userPay",
        data(){
            return{
                tabName: 'tabName',
                form:{
                    payname: '',
                    username: '',
                    paymoney: '',
                    paylevel: '',
                    costtime: '',
                    coststatus: '',
                    costtype: '',
                    costcontent: ''
                },
                status:{
                    1: '已支付',
                    2: '未支付'
                }
            }
        },
        mounted(){
            this.getParams();
            this.getDetail()
        },
        methods:{
            getParams(){
                this.payId = this.$route.query.payId;
            },
            // 获取详情信息
            getDetail(){
                console.log(this.payId,'获取id')
                const id = this.payId
                // console.log(this.result,1111)
                this.$axiosToken({
                    url: '/cost/getCostDetail',
                    method: 'get',
                    data:{id},
                    success:(result)=>{
                        this.form.payname = result[0].payname;
                        this.form.paylevel = result[0].paylevel;
                        this.form.costtime = moment(result[0].costtime).format("YYYY-MM-DD HH:mm:ss");
                        this.form.paymoney = result[0].paymoney;
                        this.form.username = result[0].username;
                        // this.status转化为文字
                        this.form.costtype = result[0].costtype;
                        this.form.coststatus = this.status[result[0].coststatus];
                        this.form.paycontent = result[0].paycontent;
                        this.form.costcontent = result[0].costcontent;
                        console.log(result,44)
                    },

                })
            },

            // 支付
            pay(){
                this.$confirm('确认支付？','提示',{
                    type: "warning"
                }).then(()=>{
                    this.$axiosToken({
                        url: '/cost/updateUserPay',
                        method: 'post',
                        data:{
                            u_id: this.payId,
                            coststatus: 1,
                            costtype: this.form.costtype,
                            costcontent: this.form.costcontent,
                        },
                        success: (result)=>{
                            this.$message({
                                message: '支付成功',
                                type: 'success',
                                duration: 2000
                            });
                         this.back()
                        }
                    });
                })
            },

            // 返回
            back(){
                this.$router.go(-1)
            },
        }
    }
</script>

<style scoped>
    /*.main-page {*/
    /*    min-height: 600px;*/
    /*}*/
    /deep/ .el-input__inner {
        background-color: #fafafa !important;
        color: grey !important;
    }
    .success-button{
        position: fixed;
        top: 27%;
        right: 20px;
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .success-button>.el-button{
        width: 85px;
        margin-bottom: 15px;
        border-radius: 4px;
        font-size: 14px;
        padding: 10px 15px
    }
    .success-button>.el-button:nth-child(1){
        margin-left: 10px;
    }
    /deep/.el-radio__input {
        cursor: pointer;
        vertical-align: middle;
        margin-bottom: 88px;
    }
    /deep/.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
        /*background-color: #000000;*/
        background-color: black;
    }
</style>